<template>
	<view class="container">
		<view class="section" @click="navigateToPage('personal')">
			<image :src="outputBase64(imagePath)" class="user-icon" v-if="imagePath" />
			<view class="icon" v-else>👤</view>
			<view class="name">{{ userName || '用户名' }}</view>
		</view>
		<view class="section" @click="navigateToPage('messages')">
			<view class="icon">💬</view>
			<view class="name">我的消息</view>
		</view>
		<view class="section" @click="navigateToPage('about')">
			<view class="icon">📄</view>
			<view class="name">关于小程序</view>
		</view>
	</view>
</template>

<script>
	import api from '../../api/api';

	export default {
		data() {
			return {
				show: true,
				userName: '', // 定义用户名
				imagePath: '' // 定义头像路径
			}
		},
		onShow() {
			this.getUserInfo();
			console.log("onShow triggered");
		},
		methods: {
			outputBase64(base64Url) {
				/// 获取到base64Data
				var base64Data = base64Url;
				/// 通过微信小程序自带方法将base64转为二进制去除特殊符号，再转回base64
				base64Data = wx.arrayBufferToBase64(wx.base64ToArrayBuffer(base64Data));
				/// 拼接请求头，data格式可以为image/png或者image/jpeg等，看需求
				const base64ImgUrl = "data:image/png;base64," + base64Data;
				/// 得到的base64ImgUrl直接给图片:src使用即可
				return base64ImgUrl;
			},
			getUserInfo() {
				api.getUserInfo().then(res => {
					const data = res.data.data
					this.userName = data.nickname
					this.imagePath = data.image
				})
			},
			navigateToPage(page) {
				let targetPath = '';
				// 根据传入的页面标识选择目标路径
				switch (page) {
					case 'personal':
						targetPath = '/pages/update_personal/update_personal';
						break;
					case 'messages':
						targetPath = '/pages/info/info';
						break;
					case 'about':
						targetPath = '/pages/about/about';
						break;
					default:
						console.warn("无效的页面标识");
						return;
				}
				// 使用 UniApp 的 navigateTo 方法跳转
				uni.navigateTo({
					url: targetPath
				});
			}
		}
	}
</script>

<style scoped>
	.container {
		max-width: 100%;
		min-height: 100vh;
		margin: 0 auto;
		background-color: #f0f0f0;
		padding: 20px 0;
	}

	.user-icon {
		width: 100rpx;
		/* 设置图标的宽度 */
		height: 100rpx;
		/* 设置图标的高度，与宽度相同 */
		border-radius: 50%;
		/* 使图标变成圆形 */
		overflow: hidden;
		/* 确保内容不超出边界 */
		margin-right: 10px;
	}


	.section {
		max-width: 85%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		background-color: #ffffff;
		padding: 15px;
		border-radius: 10px;
		margin-bottom: 20px;
	}

	.icon {
		font-size: 24px;
		margin-right: 10px;
	}

	.name {
		font-size: 18px;
		font-weight: bold;
	}
</style>